<template>
  <uni-search-bar
    :placeholder="placeholder"
    clearButton="auto"
    cancelButton="none"
    bgColor="#EEEEEE"
    @confirm="search"
  />
</template>
<script setup>
const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索商品'
  }
})
</script>

<style scoped>
.search-bar {
  background: linear-gradient(135deg, #00b578, #07c160);

  .search-input {
    background-color: rgba(255, 255, 255, 0.9);

    .placeholder {
      color: #00b578;
      opacity: 0.6;
    }
  }

  .search-btn {
    color: #ffffff;
    background-color: #00b578;

    &:active {
      background-color: darken(#00b578, 10%);
    }
  }
}

.search-history {
  .history-item {
    &.active {
      color: #00b578;
      border-color: #00b578;
    }
  }

  .clear-btn {
    color: #00b578;
  }
}
</style>
